<template>
    <div class="activityCalendar">
        <div class="content-activity">
            <van-swipe :autoplay="3000" indicator-color="" class="swipe">
                <van-swipe-item v-for="item,index in swipeImgUrls" :key="index">
                    <img :src="item.url">
                    <!--<a :href="item.aurl" class="EvenAbuy external">-->
                        <!--<i>购票</i>-->
                    <!--</a>-->
                    <div class="clearboth"></div>
                </van-swipe-item>
            </van-swipe>
        </div>

        <div class="activity-box">

            <div class="show_choose_wrap">
                <ul class="show_choose">
                    <li @click="changeSelect(1)" :class="leftShow?'active':''">近期活动</li>
                    <li @click="changeSelect(2)" :class="!leftShow?'active':''">活动预告</li>
                </ul>

                <div v-show="fade" class="fade"></div>

                <div v-show="ticket" class="ticket_tc">
                    <div class="ticket_tc_header">
                        <div class="line">{{tickDetail.date}}</div>
                        <img src="/images/ticket_close.png" class="ticket_close" @click="cancelFade()">
                    </div>
                    <div class="ticket_content">
                        <img :src="tickDetail.photo">
                    </div>
                    <p class="ticket_intro">{{tickDetail.title}}</p>
                    <span class="buy external" v-if="tickDetail.customClass=='hadShow'">活动已过期</span>
                    <a :href="tickDetail.url" class="buy external" v-else>购票</a>
                </div>
            </div>

            <div v-show="leftShow" class="display-activity" >
                <li class="display-activity-li" v-for="item,index in adverCalendarRecently" :key="index">
                    <a class="external display-activity-a" :href="item.url">
                        <div class="display-activity-day">
                            <p>{{item.sortDate}}</p>
                        </div>
                        <img class="display-activity-img" :src="item.photo">
                    </a>
                </li>
            </div>

            <div v-show="rightShow" class="display-activity">
                <vue-event-calendar :events="adverCalendarlist" @day-changed="handleDayChanged" @month-changed="handleMonthChanged">
                    <template slot-scope="props">
                        <div v-for="(event, index) in props.showEvents" class="event-item">
                            <!-- 这里拿到的是传入的单个event所有数据 -->
                            {{event}}
                        </div>
                    </template>
                </vue-event-calendar>

                <p style="font-size: 14px;color: #bbb"><span class="circle1"></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;已过期活动</p>
                <p style="font-size: 14px;color: #bbb"><span class="circle2"></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;即将开展活动</p>
            </div>
        </div>


    </div>
</template>

<script>
    /*事件日历*/
    import vueEventCalendar from 'vue-event-calendar'
    import 'vue-event-calendar/dist/style.css'
    import Vue from 'vue'
    import dayjs from 'dayjs'
    import customParseFormat from 'dayjs/plugin/customParseFormat'
    const mainTheme = '#787ac3'
    Vue.use(vueEventCalendar, {locale: 'zh',color:mainTheme})
    import {escape2Html} from '../../utils/tools'
    export default {
        name: "ActivityCalendar",
        data () {
            return {
                isShow: false,
                leftShow: true,
                rightShow: false,
                fade: false,
                ticket: false,
                /*轮播图片*/
                swipeImgUrls: [],
                /*活动日历集合*/
                adverCalendarlist: [],
                /*最近活动日历集合*/
                adverCalendarRecently: [],
                day: '',
                yearMonth: '',
                tickDetail: {
                    date: '',
                    title: '',
                    photo: '',
                    url: '',
                    customClass: ''
                }
            }
        },
        created(){
            var myDate = new Date();
            var year=myDate.getFullYear();
            var month=myDate.getMonth()+1;
            if(month < 10) month = "0" + month;
            this.yearMonth = year + "-" + month;
        },
        mounted(){
            document.querySelector(".events-wrapper").style.display="none"
            this.showAD()
            this.showCalendarList()
        },
        methods:{
            /*日期选择事件*/
            handleDayChanged(val){
                console.log(val.events[0])
                this.tickDetail.customClass = val.events[0].customClass
                this.tickDetail.date = val.events[0].date
                this.tickDetail.title = val.events[0].title?escape2Html(val.events[0].title):val.events[0].title
                this.tickDetail.photo = val.events[0].photo
                this.tickDetail.url = val.events[0].url
                this.fade=true
                this.ticket=true
            },
            changeShow(){
                this.isShow=!this.isShow
            },
            /*时间选择事件*/
            changeSelect(val){
                this.leftShow=!this.leftShow
                if(val == 1){
                    this.leftShow=true
                    this.rightShow=false
                }else{
                    this.leftShow=false
                    this.rightShow=true
                }

            },
            /*月份切换事件*/
            handleMonthChanged(val){
                dayjs.extend(customParseFormat)
                this.yearMonth=dayjs(val,'YYYY年MM').format('YYYY-MM')
            },
            /*弹窗关闭事件*/
            cancelFade(){
                this.fade=false
                this.ticket=false
            },
            /*showAD(){
                this.$api.activityCalendar.activityCalendarList({field:'isAd',value:'1'}).then(res=>{
                    if(res.code==0){
                        var data = JSON.parse(res.data)
                        var success = data.success
                        var adverCalendarJsonList = data.adverCalendarJsonList
                        this.swipeImgUrls = adverCalendarJsonList
                    }
                }).catch(err=>{
                    console.log(err)
                })
            },*/
            showAD(){
                this.$api.advert.advertList({field:'isShow',value:'显示',type:'热门活动-轮播广告'}).then(res=>{
                    if(res.code==0){
                        var data = JSON.parse(res.data)
                        var success = data.success
                        var adverJsonList = data.adverJsonList
                        this.swipeImgUrls = adverJsonList
                    }
                }).catch(err=>{
                    console.log(err)
                })
            },
            showCalendarList(){
                this.$api.activityCalendar.activityCalendarList({field:'isAd',value:'0'}).then(res=>{
                    if(res.code==0){
                        var data = JSON.parse(res.data)
                        var success = data.success
                        var adverCalendarJsonList = data.adverCalendarJsonList
                        this.adverCalendarlist = adverCalendarJsonList
                    }
                }).catch(err=>{
                    console.log(err)
                })
                this.$api.activityCalendar.adverCalendarRecently().then(res=>{
                    if(res.code==0){
                        var data = JSON.parse(res.data)
                        var success = data.success
                        var adverCalendarJsonList = data.adverCalendarJsonList
                        this.adverCalendarRecently = adverCalendarJsonList
                    }
                }).catch(err=>{
                    console.log(err)
                })
            }

        }
    }
</script>

<style lang="less">
    @import "../../assets/less/base";
    .content-activity {
        visibility: visible;
        animation-name: fadeIn;
        border: none;
        width: 100%;
        position: relative;
        margin: 0 auto;
    }

    .content-activity img {
        width: 100%;
        vertical-align: top;
        border: 0;
        visibility: visible;
        height: 169px;
    }

    .content-activity .EvenAbuy {
        display: block;
        position: absolute;
        z-index: 99;
        background: rgba(0, 0, 0, 0.8);
        width: auto;
        height: auto;
        padding: 2px 10px;
        right: 10px;
        bottom: 10px;
        -webkit-border-radius: 5px;
        color: #fff;
    }

    .EvenAbuy i {
        letter-spacing: 5px;
        padding: 0;
        display: inline-block;
        vertical-align: top;
        font-style: normal;
        font-weight: normal;
    }

    .activity-box {
        width: 95%;
        margin: 10px auto 0 auto;
        margin-top: -20px;
    }

    .activity-box .active-title {
        font-size: 15px;
        padding: 30px 0px 15px 0px;
    }

    .activity-box .display-activity {
        list-style: none;
        padding-left: 0px;
    }

    .display-activity .display-activity-li {
        width: 100%;
        /*float: left;*/
        /*margin-right: 5px;*/
        margin-bottom: 10px;
        overflow: hidden;
    }
    .display-activity .display-activity-li:last-child{
        padding-bottom: 10px;
    }

    .display-activity .display-activity-img {
        width: 100%;
        height: 100%;
    }

    .display-activity .display-activity-a {
        width: 100%;
        display: block;
        height: auto;
        position: relative;
        overflow: hidden;
        color: #fff;
    }

    .display-activity .display-activity-day {
        width: 50px;
        height: 40px;
        background: @main-theme-color;
        position: absolute;
        top: 78%;
        right: 0;
        overflow: hidden;
    }

    .display-activity-day p {
        font-size: 13px;
        line-height: 16px;
        text-align: center;
    }

    .activity-box .show_choose_wrap {
        position: relative;
        padding: 25px 0 10px 0;
    }

    .show_choose_wrap .show_choose {
        height: 40px;
        display: block;
        list-style: none;
        padding-left: 0px;
    }

    .show_choose li.active {
        background: @main-theme-color;
        color: #FFFFFF;
    }

    .show_choose li {
        width: 25%;
        line-height: 40px;
        text-align: center;
        font-size: 15px;
        float: left;
        padding-left: 8px;
        padding-right: 8px;
        background: #cbcbcb;
        color: #262323;
        cursor: pointer;
    }

    .show_choose_wrap .choose_month {
        position: absolute;
        top: 40px;
        left: 0px;
    }

    .show_choose_wrap .choose_year {
        position: absolute;
        top: 40px;
        left: 120px;
    }

    .show_choose_wrap .choose_date {
        width: 100%;
        margin-top: 20px;
    }

    .choose_month select {
        width: 110px;
        border: none;
        border: 1px solid #5c5c5c;
        overflow: hidden;
        border-radius: 4px;
        color: #FFFFFF;
        padding-left: 10px;
        height: 20px;
        line-height: 20px;
        font-size: 14px;
        font-family: "lthz";
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        font: 12px/1.5 'Microsoft YaHei';
    }

    .choose_year select {
        width: 68px;
        border: 1px solid #5c5c5c;
        overflow: hidden;
        border-radius: 4px;
        color: #FFFFFF;
        padding-left: 10px;
        height: 20px;
        line-height: 20px;
        font-size: 14px;
        font-family: "lthz";
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
    }

    .show_choose_wrap .display_mode2_header_phone {
        height: 30px;
        background: #333132;
        position: relative;
        z-index: 9;
        list-style: none;
        width: 100%;
        margin-top: 20px;
        padding-left: 0px;
    }

    .display_mode2_header_phone li {
        float: left;
        width: 14.285%;
        font-size: 14px;
        text-align: center;
        height: 30px;
        line-height: 30px;
        color: #FFFFFF;
    }

    .show_choose_wrap .display_mode2_body {
        box-shadow: -1px 1px 1px #5c5c5c;
        position: relative;
        top: -1px;
        list-style: none;
        padding-left: 0px;
        overflow: hidden;
    }

    .display_mode2_body li {
        width: 14.28%;
        height: 49px;
        border-right: 1px solid #5c5c5c;
        border-top: 1px solid #5c5c5c;
        float: left;
        position: relative;
    }

    .display_mode2_body li>span {
        position: absolute;
        left: 50%;
        top: 50%;
        display: block;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border-radius: 50%;
        margin-left: -15px;
        margin-top: -15px;
    }

    .adver_calendar_buttion {
        background: #00c0ff;
        color: #FFFFFF;
    }

    .adver_calendar_over_buttion {
        background: #E8E8E8;
    }

    .adver_calendar_border_buttion {
        border: 1px solid #3d4145;
    }

    .show_choose_wrap .fade {
        position: fixed;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: black;
        z-index: 1000;
        -moz-opacity: 0.6;
        opacity: .60;
    }

    .show_choose_wrap .ticket_tc {
        width: 95%;
        position: fixed;
        left: 2.5%;
        top: 50%;
        height: 280px;
        background: #FFFFFF;
        z-index: 1001;
        margin-top: -140px;
        border-radius: 5px;
        overflow: hidden;
        font-family: "lthz";
        animation-name: fadeInDownBig;
        animation-fill-mode: both;
    }

    .ticket_tc .ticket_tc_header {
        height: 25px;
        position: relative;
        padding-top: 5px;
        display: block;
    }

    .ticket_tc .ticket_tc_header .line {
        height: 18px;
        line-height: 18px;
        font-size: 18px;
        float: left;
        margin-left: 10px;
        color: #191819;
        border-left: 2px solid #00c0ff;
        padding-left: 10px;
    }

    .ticket_tc .ticket_tc_header .ticket_close {
        float: right;
        width: 40px;
        position: relative;
        top: -5px;
        right: 10px;
    }

    .ticket_tc .ticket_content {
        width: 94.6%;
        margin: 0 auto;
        height: 188px;
        overflow: hidden;
        text-align: center;
        margin-top: 5px;
    }

    .ticket_tc .ticket_content img {
        height: 188px;
    }

    .ticket_tc .ticket_intro {
        height: 30px;
        line-height: 30px;
        padding-left: 2.7%;
        padding-right: 2.7%;
        font-size: 15px;
        color: #191819;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        border-bottom: 1px solid #cccccc;
        margin: 0px;
        text-align: center;
    }

    .ticket_tc .buy {
        display: block;
        text-align: center;
        font-size: 15px;
        color: #00c0ff;
        height: 30px;
        line-height: 30px;
    }

    .pic{
        position: absolute;
        top: 0;
        left: 50%;
        margin-left: -50px;
        width: 100px;
        height: 100px;
        z-index: 9999;
        background-color: #fff;
        color: #0c0d0d;
    }
    .__vev_calendar-wrapper .cal-wrapper .cal-header{
        background-color: @main-body-color;
        padding-bottom: 0px;
    }
    .__vev_calendar-wrapper .cal-wrapper .date-num{
        line-height: 40px;
    }
    .__vev_calendar-wrapper {
        position: relative;
        overflow: hidden;
        width: 100%;
        border: 1px solid #e0e0e0;
    }
    .__vev_calendar-wrapper .cal-wrapper .cal-header {
        background-color: #f6f6f6;
        padding-bottom: 0px;
        border-bottom:1px solid #e0e0e0;
    }
    .__vev_calendar-wrapper .cal-wrapper .cal-body .dates .item.event.hadShow {
        cursor: pointer;
    }
    .__vev_calendar-wrapper .cal-wrapper .cal-body .dates .item.event.hadShow .date-num {
        color: @main-theme-color;
    }
    .__vev_calendar-wrapper .cal-wrapper .cal-body .dates .item.event.hadShow .is-event {
        border-color: rgb(120, 122, 195);
        background-color: #FFFFFF !important;
    }
    .__vev_calendar-wrapper .cal-wrapper .cal-body .dates .item.event.notShow {
        cursor: pointer;
    }
    .__vev_calendar-wrapper .cal-wrapper .cal-body .dates .item.event.notShow .date-num {
        color: #FFFFFF !important;
    }
    .__vev_calendar-wrapper .cal-wrapper .cal-body .dates .item.event.notShow .is-event {
        border-color: @main-theme-color;
        background-color: @main-theme-color;
    }
    .circle1 {
        border: 1px solid @main-theme-color;
        background-color: #fff;
        border-radius: 50%;
        width: 14px;
        height: 14px;
        position: absolute;
        margin-top: 1.5px;
    }
    .circle2 {
        border: 1px solid @main-theme-color;
        background-color: @main-theme-color;
        border-radius: 50%;
        width: 14px;
        height: 14px;
        position: absolute;
        margin-top: 1.5px;
    }
</style>
